<template>
  <div class="roles">
    <div class="container">
      <div class="search-button">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['system:role:add']"
          >{{ $t("system.AddRole") }}</el-button
        >
      </div>

      <!-- 表格数据 -->
      <el-table
        v-loading="loading"
        :data="roleList"
        @selection-change="handleSelectionChange"
        class="codeTable"
      >
        <el-table-column
          :label="$t('system.Role')"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150"
        >
          <template #default="{ row }">
            <div class="column1">{{ row.roleName }}</div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('system.UpdateTime(modifier)')"
          align="center"
          min-width="150"
        >
          <template #default="{ row }">
            <div class="column1">
              {{ parseTime(row.createTime) }}{{ row.updateBy }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('system.Desc')"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150"
        >
          <template #default="{ row }">
            <div class="column1">{{ row.remark || "-" }}</div>
          </template></el-table-column
        >
        <el-table-column
          :label="$t('system.Operate')"
          align="center"
          class-name="small-padding fixed-width"
          min-width="150"
        >
          <template #default="{ row }">
            <div class="column1">
              <el-button
                link
                type="primary"
                @click="handleDetail(row.roleId)"
                v-if="row.roleId !== 1"
                v-hasPermi="['system:role:detail']"
                >{{ $t("common.detail") }}</el-button
              >

              <el-button
                link
                type="primary"
                @click="handleUpdate(row.roleId)"
                v-if="row.roleId !== 1"
                v-hasPermi="['system:role:edit']"
                >{{ $t("common.edit") }}</el-button
              >

              <el-button
                link
                type="primary"
                @click="handleAuthUser(row.roleId)"
                v-if="row.roleId !== 1"
                v-hasPermi="['system:role:manage']"
                >{{ $t("system.ManageMember") }}</el-button
              >
              <el-button
                link
                type="danger"
                @click="deletePrompt(row.roleId, row.roleName)"
                v-if="row.roleId !== 1"
                v-hasPermi="['system:role:remove']"
                >{{ $t("common.delete") }}</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
        class="pagination"
      />

      <!-- 删除弹出层 -->
      <el-dialog v-model="deleteVisible" class="no-header-dialog">
        <img src="@/assets/images/warn.png" alt="" />
        <div class="dec">
          删除后不可恢复，确定删除<span class="deletecolor">{{
            deleteName
          }}</span
          >吗？
        </div>
        <div class="chooise">
          <div class="btn delete" @click="closeDelete">取消</div>
          <div class="btn success" @click="deleteApply">确定</div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup name="Role">
import {
  addRole,
  changeRoleStatus,
  dataScope,
  delRole,
  getRole,
  listRole,
  updateRole,
  deptTreeSelect,
} from "@/api/system/role";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import {
  roleMenuTreeselect,
  treeselect as menuTreeselect,
} from "@/api/system/menu";

const router = useRouter();
const { proxy } = getCurrentInstance();
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");

const roleList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const dateRange = ref([]);
const menuOptions = ref([]);
const menuExpand = ref(false);
const menuNodeAll = ref(false);
const deptExpand = ref(true);
const deptNodeAll = ref(false);
const deptOptions = ref([]);
const openDataScope = ref(false);
const menuRef = ref(null);
const deptRef = ref(null);

/** 数据范围选项*/
const dataScopeOptions = ref([
  { value: "1", label: "全部数据权限" },
  { value: "2", label: "自定数据权限" },
  { value: "3", label: "本部门数据权限" },
  { value: "4", label: "本部门及以下数据权限" },
  { value: "5", label: "仅本人数据权限" },
]);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    roleName: undefined,
    roleKey: undefined,
    status: undefined,
  },
  rules: {
    roleName: [
      { required: true, message: "角色名称不能为空", trigger: "blur" },
    ],
    roleKey: [{ required: true, message: "权限字符不能为空", trigger: "blur" }],
    roleSort: [
      { required: true, message: "角色顺序不能为空", trigger: "blur" },
    ],
  },
});

const { queryParams, form, rules } = toRefs(data);

/** 查询角色列表 */
function getList() {
  loading.value = true;
  listRole(proxy.addDateRange(queryParams.value, dateRange.value)).then(
    (response) => {
      roleList.value = response.rows;
      total.value = response.total;
      loading.value = false;
    }
  );
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
}

// -------------------------------------------------  删除事件  -----------------------------------------------------

const deleteId = ref();
const deleteName = ref();
const deleteVisible = ref(false);

const deletePrompt = (id, name) => {
  deleteVisible.value = true;
  deleteId.value = id;
  deleteName.value = name;
};

const closeDelete = () => {
  deleteVisible.value = false;
  deleteId.value = null;
  deleteName.value = null;
};

const deleteApply = async () => {
  const res = await delRole(deleteId.value);
  if (res.code === 200) ElMessage.success(res.msg);
  else ElMessage.error(res.msg);
  getList();
  deleteVisible.value = false;
  deleteId.value = null;
  deleteName.value = null;
};
/** 删除按钮操作 */
function handleDelete(row) {
  const roleIds = row.roleId || ids.value;
  proxy.$modal
    .confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?')
    .then(function () {
      return delRole(roleIds);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "system/role/export",
    {
      ...queryParams.value,
    },
    `role_${new Date().getTime()}.xlsx`
  );
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.roleId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}
/** 角色状态修改 */
function handleStatusChange(row) {
  let text = row.status === "0" ? "启用" : "停用";
  proxy.$modal
    .confirm('确认要"' + text + '""' + row.roleName + '"角色吗?')
    .then(function () {
      return changeRoleStatus(row.roleId, row.status);
    })
    .then(() => {
      proxy.$modal.msgSuccess(text + "成功");
    })
    .catch(function () {
      row.status = row.status === "0" ? "1" : "0";
    });
}

/** 分配用户 */
function handleAuthUser(roleId) {
  router.push("/system/role-auth/user/" + roleId);
}
/** 查询菜单树结构 */
function getMenuTreeselect() {
  menuTreeselect().then((response) => {
    menuOptions.value = response.data;
  });
}
/** 所有部门节点数据 */
function getDeptAllCheckedKeys() {
  // 目前被选中的部门节点
  let checkedKeys = deptRef.value.getCheckedKeys();
  // 半选中的部门节点
  let halfCheckedKeys = deptRef.value.getHalfCheckedKeys();
  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
  return checkedKeys;
}
/** 重置新增的表单以及其他数据  */
function reset() {
  if (menuRef.value != undefined) {
    menuRef.value.setCheckedKeys([]);
  }
  menuExpand.value = false;
  menuNodeAll.value = false;
  deptExpand.value = true;
  deptNodeAll.value = false;
  form.value = {
    roleId: undefined,
    roleName: undefined,
    roleKey: undefined,
    roleSort: 0,
    status: "0",
    menuIds: [],
    deptIds: [],
    menuCheckStrictly: true,
    deptCheckStrictly: true,
    remark: undefined,
  };
  proxy.resetForm("roleRef");
}
/** 添加角色 */
function handleAdd() {
  router.push({
    name: "AddRoles",
    query: { openType: "add" },
  });
}
/**
 * @修改角色
 * */
function handleUpdate(roleId) {
  router.push({
    name: "AddRoles",
    query: { openType: "edit", roleId },
  });
}

/**
 * @查看角色详情
 * */
function handleDetail(roleId) {
  router.push({
    name: "AddRoles",
    query: { openType: "detail", roleId },
  });
}
/** 根据角色ID查询菜单树结构 */
function getRoleMenuTreeselect(roleId) {
  return roleMenuTreeselect(roleId).then((response) => {
    menuOptions.value = response.menus;
    return response;
  });
}
/** 根据角色ID查询部门树结构 */
function getDeptTree(roleId) {
  return deptTreeSelect(roleId).then((response) => {
    deptOptions.value = response.depts;
    return response;
  });
}
/** 树权限（展开/折叠）*/
function handleCheckedTreeExpand(value, type) {
  if (type == "menu") {
    let treeList = menuOptions.value;
    for (let i = 0; i < treeList.length; i++) {
      menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
    }
  } else if (type == "dept") {
    let treeList = deptOptions.value;
    for (let i = 0; i < treeList.length; i++) {
      deptRef.value.store.nodesMap[treeList[i].id].expanded = value;
    }
  }
}
/** 树权限（全选/全不选） */
function handleCheckedTreeNodeAll(value, type) {
  if (type == "menu") {
    menuRef.value.setCheckedNodes(value ? menuOptions.value : []);
  } else if (type == "dept") {
    deptRef.value.setCheckedNodes(value ? deptOptions.value : []);
  }
}
/** 树权限（父子联动） */
function handleCheckedTreeConnect(value, type) {
  if (type == "menu") {
    form.value.menuCheckStrictly = value ? true : false;
  } else if (type == "dept") {
    form.value.deptCheckStrictly = value ? true : false;
  }
}
/** 所有菜单节点数据 */
function getMenuAllCheckedKeys() {
  // 目前被选中的菜单节点
  let checkedKeys = menuRef.value.getCheckedKeys();
  // 半选中的菜单节点
  let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
  return checkedKeys;
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["roleRef"].validate((valid) => {
    if (valid) {
      if (form.value.roleId != undefined) {
        form.value.menuIds = getMenuAllCheckedKeys();
        updateRole(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        form.value.menuIds = getMenuAllCheckedKeys();
        addRole(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}
/** 选择角色权限范围触发 */
function dataScopeSelectChange(value) {
  if (value !== "2") {
    deptRef.value.setCheckedKeys([]);
  }
}
/** 分配数据权限操作 */
function handleDataScope(row) {
  reset();
  const deptTreeSelect = getDeptTree(row.roleId);
  getRole(row.roleId).then((response) => {
    form.value = response.data;
    openDataScope.value = true;
    nextTick(() => {
      deptTreeSelect.then((res) => {
        nextTick(() => {
          if (deptRef.value) {
            deptRef.value.setCheckedKeys(res.checkedKeys);
          }
        });
      });
    });
    title.value = "分配数据权限";
  });
}
/** 提交按钮（数据权限） */
function submitDataScope() {
  if (form.value.roleId != undefined) {
    form.value.deptIds = getDeptAllCheckedKeys();
    dataScope(form.value).then((response) => {
      proxy.$modal.msgSuccess("修改成功");
      openDataScope.value = false;
      getList();
    });
  }
}
/** 取消按钮（数据权限）*/
function cancelDataScope() {
  openDataScope.value = false;
  reset();
}

getList();
</script>

<style lang="scss">
.roles {
  .codeTable .el-table__body-wrapper tbody tr td {
    position: relative;
    text-align: center;
    .column1 {
      position: absolute;
      top: 12px;
      left: 50%;
      width: 200px;
      text-align: left;
      transform: translateX(-50%);
    }
  }
  .codeTable .el-table__header-wrapper thead th {
    position: relative;
    text-align: center;
    .cell {
      position: absolute;
      top: 12px;
      left: 50%;
      width: 200px;
      text-align: left;
      padding: 0;
      transform: translateX(-50%);
    }
  }
}
</style>

<style lang="scss" scoped>
.roles {
  width: 100%;
  height: 100%;

  .container {
    position: relative;
    width: calc(100% - 40px);
    height: 92%;
    margin: 0 20px 20px;
    border-radius: 10px;
    background: white;

    .pagination {
      position: absolute;
      left: 50%;
      bottom: 30px;
      transform: translateX(-50%);
    }
  }

  .search-button {
    position: absolute;
    right: 0px;
    top: -45px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-button {
      width: 106px;
      height: 40px;
      opacity: 1;
      border-radius: 4px;
      background: rgba(43, 193, 123, 1);
      border: 1px solid rgba(43, 193, 123, 1);
      font-size: 14px;
      color: white;
    }
  }
}
</style>
